<template>
    <div>
        <van-overlay :show="show" @click="show = false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <div>
                        <van-field v-model="uname" label="用户名" placeholder="请输入要修改的用户名"/>
                        <van-button type="default" @click="cancel" class="cancel">取消</van-button>
                        <van-button type="default" @click="update" class="btn">确认修改</van-button>
                    </div>
                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script>
export default {
  data() {
    return {
        show:'',
        uname:''
    };
  },

  methods: {
      update(){
          this.axios.post('/user/updatename',`uname=${this.uname}&uid=${this.$store.state.uid}`).then(res=>{
         if (res.data.code == 200) {
            this.$toast("用户名修改成功");
            this.$router.push('/mypage');
          } else if (res.data.code == 201) {
            this.$toast("用户名修改失败");
          }
             
          })
      },
      cancel(){
          this.$router.push('/mypage');
      }
  }
}
</script>



<style scoped>
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 13rem;
    height: 5rem;
    background-color: #fff;
    border-radius: .3125rem;
  }
  .van-field__label {
      width: 2em !important;
  }
  .btn{
    margin-top: -21.9rem;
    margin-left: 5.5rem;
    border-radius: .3rem;
  }
 .cancel {
    margin-left: .5rem;
    margin-top: .625rem;
      border-radius: .3rem;
}
</style>